<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>3Dmol.js - A modern, object-oriented JavaScript library for visualizing molecular data</title>
  <meta name="Author" content="David Koes">
  <meta property="og:title" content="3Dmol.js - A modern, object-oriented JavaScript library for visualizing molecular data">
  <meta property="og:description" content="3Dmol.js is an object-oriented, WebGL based JavaScript library for online molecular visualization - No Java required!">
  <meta property="og:image" content="https://avatars.githubusercontent.com/u/15018659?s=200&v=4">
  <meta property="og:url" content="https://3dmol.org">

  <link rel="icon" type="image/png" href="favicon.ico">
  <link rel="apple-touch-icon" href="favicon.ico">
  <link type="text/css" rel="stylesheet" href="css/index.css">
  <script src="https://code.jquery.com/jquery-3.6.3.min.js"
    integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  <script>
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-55629183-1', 'auto');
    ga('send', 'pageview');

  </script>
  <script src="./build/3Dmol.js"></script>
  <script>
    const initShapes = function (viewer) {
      $.get('tests/test_structs/benzene-homo.cube', function (data) {
        var voldata = new $3Dmol.VolumeData(data, "cube");
        if (viewer.hasVolumetricRender()) {
          viewer.addVolumetricRender(voldata, {
            transferfn: [{ color: "blue", opacity: .075, value: 0.1 },
            { color: "blue", opacity: .001, value: 0.01 },
            { color: "white", opacity: 0, value: 0 },
            { color: "red", opacity: .001, value: -0.01 },
            { color: "red", opacity: .075, value: -0.1 }]
          });
        } else {
          viewer.addIsosurface(voldata, { isoval: 0.01, color: "blue", alpha: 0.95, smoothness: 10 });
          viewer.addIsosurface(voldata, { isoval: -0.01, color: "red", alpha: 0.95, smoothness: 10 });
        }
        viewer.setStyle({}, { stick: {} });
        viewer.zoomTo();
        viewer.render();
      }, 'text');
    };

    const init1YCR = function (viewer) {
      viewer.addStyle({}, { "line": {} });
      viewer.addSurface($3Dmol.SurfaceType.VDW, { 'opacity': 0.8, colorscheme: 'whiteCarbon' }, { "chain": "A" }, { "chain": "A" });
      viewer.addStyle({ "chain": "B" }, { "stick": { colorscheme: 'Jmol' } });
      viewer.zoomTo({ "chain": "B" });
      viewer.addResLabels({chain: "B", resi: [19,23,26]},{backgroundColor: 0xb0b0b0, backgroundOpacity: 0.8, inFront: true});
      viewer.addCylinder({start: {chain: "B", resi: 23, atom: "NE1"}, end: {chain: "A", resi: 54, atom: "O"}, dashed: true,color:'#FFFAA0',fromCap:'round',toCap:'round'});
    };

    // bind callbacks to window object so they can be resolved in autoload
    window.initShapes = initShapes;
    window.init1YCR = init1YCR;

    const addSurf = function (viewer) {
      viewer.addSurface($3Dmol.SurfaceType.VDW, { opacity: 0.75 },
        { hetflag: false }, { hetflag: false }, { chain: 'B' });
    };

    $(document).ready(function () {
      const hidetext = function () {
        $("#text3Dmol, #viewtext, #embedtext, #teachtext, #jupytertext, #developtext").hide();
      };
      $('#view').hover(
        function () {
          hidetext();
          $("#viewtext").show();
        },
        function () {
          hidetext();
          $("#text3Dmol").show();
        });
      $('#embed').hover(
        function () {
          hidetext();
          $("#embedtext").show();
        },
        function () {
          hidetext();
          $("#text3Dmol").show();
        });

      $('#teach').hover(
        function () {
          hidetext();
          $("#teachtext").show();
        },
        function () {
          hidetext();
          $("#text3Dmol").show();
        });

      $('#jupyter').hover(
        function () {
          hidetext();
          $("#jupytertext").show();
        },
        function () {
          hidetext();
          $("#text3Dmol").show();
        });
      $('#develop').hover(
        function () {
          hidetext();
          $("#developtext").show();
        },
        function () {
          hidetext();
          $("#text3Dmol").show();
        });
    });
  </script>
</head>

<body>
  <div id=content>
    <div class="header">
      <div id="title3Dmol"><b>3D</b>mol<font style="font-weight:400">.js</font>
      </div>
      <div id="title3Dmolright">
        <div id="strip" class="titlefont">
          <a href="doc/tutorial-url.html" id="view" class="titletext">View</a>
          <a href="doc/tutorial-embeddable.html" id="embed" class="titletext">Embed</a>
          <a href="doc/tutorial-learning_environment.html" id="teach" class="titletext">Teach</a>
          <a href="https://colab.research.google.com/drive/1T2zR59TXyWRcNxRgOAiqVPJWhep83NV_?usp=sharing" id="jupyter"
            class="titletext">Jupyter</a>
          <a href="doc/index.html" id="develop" class="titletext">Develop</a>
        </div>
        <div id="infotext">
          <span id="text3Dmol" class="floattext">A modern, object-oriented JavaScript library for visualizing molecular
            data</span>
          <span id="viewtext" class="floattext">View structures through a declarative URL interface</span>
          <span id="embedtext" class="floattext">Embed molecular viewers in webpages with two lines of code</span>
          <span id="teachtext" class="floattext">Engage students while teaching molecular structures</span>
          <span id="jupytertext" class="floattext">Include interactive 3D structures in Jupyter notebooks</span>
          <span id="developtext" class="floattext">Develop web applications using a full featured API</span>
        </div>
      </div>
      <div id="rightstrip" class="titlefont">
        <a id="issues" href="https://github.com/3dmol/3Dmol.js/issues" class="titletext">Feedback</a>
        <a id="help" href="https://github.com/3dmol/3Dmol.js" class="titletext">Download</a>
      </div>
    </div>
  </div>
  <div id="viewercontainer" class="body row">
    <div class="table">
      <div class="tablerow">
        <div id='viewer1' class='viewer_3Dmoljs' data-href='tests/test_structs/2por.pdb' data-backgroundcolor='0xffffff'
          data-select='{"hetflag":false}' data-style='{"cartoon":{"color":"spectrum"}}'></div>
        <div id='viewer2' class='viewer_3Dmoljs' data-href='tests/test_structs/3m8l.cif.gz' data-config='ambientOcclusion:strength~1,radius=10'
          data-select1='chain:A' data-style1='stick:radius=1,color=yellow' 
          data-select2='chain:B' data-style2='sphere:color=white'
          data-select3='chain:C' data-surface3='color:#5085e4;opacity:1' data-backgroundcolor='0xf6f6f6'></div>
      </div>
      <div class="tablerow">
        <div id='viewer4' class='viewer_3Dmoljs' data-href="tests/test_structs/benzene.sdf" data-datatype="sdf"
          data-callback='initShapes' data-backgroundcolor='0xf6f6f6'></div>
        <div id='viewer3' class='viewer_3Dmoljs' data-href='tests/test_structs/1YCR.pdb' data-backgroundcolor='0xffffff'
          data-style='{"cartoon":{}}' data-callback='init1YCR'></div>
      </div>
    </div>
    <textarea style="display: none;" id="moldata_sdf">v:U4C5Cr:4
  -OEChem-12201211493D

 43 44  0     1  0  0  0  0  0999 V2000
   -8.1967    0.5191    0.7989 C   0  0  0  0  0  0  0  0  0  0  0  0
   -7.6843   -0.2222   -0.2656 C   0  0  0  0  0  0  0  0  0  0  0  0
   -7.4111    1.4960    1.4107 C   0  0  0  0  0  0  0  0  0  0  0  0
   -6.3864    0.0132   -0.7188 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.7096    1.6571   -1.9242 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.0806    3.1754   -0.1629 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.5556    2.6951   -2.8322 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.9424    4.1749   -1.1154 C   0  0  0  0  0  0  0  0  0  0  0  0
   -6.1130    1.7316    0.9575 C   0  0  0  0  0  0  0  0  0  0  0  0
   -5.6006    0.9902   -0.1071 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.4684    1.9044   -0.5763 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3375    0.5391    1.2056 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.7567   -0.6431    0.1759 C   0  0  0  0  0  0  0  0  0  0  0  0
    4.1896   -0.7188    0.9465 C   0  0  0  0  0  0  0  0  0  0  0  0
   -5.2909    2.7837    1.6268 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.7605   -3.4645   -4.5901 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.7254   -2.1586    3.8348 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.5133   -4.3920    2.7268 C   0  0  0  0  0  0  0  0  0  0  0  0
    6.6863    1.6002   -0.3205 C   0  0  0  0  0  0  0  0  0  0  0  0
    7.5989    1.9082    1.9888 C   0  0  0  0  0  0  0  0  0  0  0  0
   -4.2066    1.2256   -0.6124 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.9764   -3.9346   -3.3752 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3654   -3.2099   -3.2596 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.1347   -3.6640   -2.0173 C   0  0  0  0  0  0  0  0  0  0  0  0
    2.4837   -2.9599   -1.8449 C   0  0  0  0  0  0  0  0  0  0  0  0
    3.2863   -3.4666   -0.6437 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.6329   -2.4479    1.5093 C   0  0  0  0  0  0  0  0  0  0  0  0
    5.1024    1.5172    1.6288 C   0  0  0  0  0  0  0  0  0  0  0  0
    4.6041   -2.7047   -0.5026 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.6282    0.7946    0.4366 C   0  0  1  0  0  0  0  0  0  0  0  0
   -1.6645   -0.9464    1.1968 C   0  0  2  0  0  0  0  0  0  0  0  0
    3.9912    0.7912    0.8596 C   0  0  1  0  0  0  0  0  0  0  0  0
   -0.5310   -2.8799    2.4982 C   0  0  0  0  0  0  0  0  0  0  0  0
    6.5338    1.2007    1.1499 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.1810    3.9094   -2.4070 N   0  3  0  0  0  0  0  0  0  0  0  0
   -3.2093    0.6656    0.2711 N   0  0  0  0  0  0  0  0  0  0  0  0
    4.3505   -1.2956   -0.3057 N   0  0  0  0  0  0  0  0  0  0  0  0
   -0.4217   -0.4795    0.6395 N   0  0  0  0  0  0  0  0  0  0  0  0
    2.6640    1.0826    1.3983 N   0  0  0  0  0  0  0  0  0  0  0  0
    1.0467    4.8534   -3.2690 O   0  5  0  0  0  0  0  0  0  0  0  0
    0.0407    1.1492    2.2310 O   0  0  0  0  0  0  0  0  0  0  0  0
   -3.1430   -1.4631   -0.6544 O   0  0  0  0  0  0  0  0  0  0  0  0
    4.2427   -1.3265    2.0137 O   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0  0  0  0
  6  8  1  0  0  0  0
  3  9  1  0  0  0  0
  9 15  1  0  0  0  0
  4 10  1  0  0  0  0
 10 21  1  0  0  0  0
  5 11  1  0  0  0  0
 11 30  1  0  0  0  0
 12 30  1  0  0  0  0
 12 38  1  0  0  0  0
 13 31  1  0  0  0  0
 13 36  1  0  0  0  0
 14 32  1  0  0  0  0
 14 37  1  0  0  0  0
 21 36  1  0  0  0  0
 16 22  1  0  0  0  0
 22 23  1  0  0  0  0
 23 24  1  0  0  0  0
 24 25  1  0  0  0  0
 25 26  1  0  0  0  0
 26 29  1  0  0  0  0
 29 37  1  0  0  0  0
 30 39  1  0  0  0  0
 27 31  1  0  0  0  0
 31 38  1  0  0  0  0
 28 32  1  0  0  0  0
 32 39  1  0  0  0  0
 17 33  1  0  0  0  0
 18 33  1  0  0  0  0
 27 33  1  0  0  0  0
 19 34  1  0  0  0  0
 20 34  1  0  0  0  0
 28 34  1  0  0  0  0
  7 35  1  0  0  0  0
 35 40  1  0  0  0  0
  1  3  2  0  0  0  0
  2  4  2  0  0  0  0
  5  7  2  0  0  0  0
  9 10  2  0  0  0  0
  6 11  2  0  0  0  0
 12 41  2  0  0  0  0
 13 42  2  0  0  0  0
 14 43  2  0  0  0  0
  8 35  2  0  0  0  0
M  CHG  2  35   1  40  -1
M  END
</textarea>
</body>

</html>
